<template>
  <div id="retreat">
      <table class="table">
        <thead>
            <tr>
              <th>菜品</th>
              <th>当前数量</th>
              <th class="text-center" width="40%">退菜数量</th>
            </tr>
        </thead>
        <tbody>
          <tr :key="index" v-for="(i,index) in menuList">
            <td>{{i.menu_name}}</td>
            <td>{{i.num}}</td>
            <td class="text-center">
              <a @click="if(i.num_diff<i.num)i.num_diff++" href="javascript:;" class="increase_menu_item pull-left">
                <h4 class="glyphicon glyphicon-plus-sign text-danger"></h4>
              </a>  
              <a @click="if(i.num_diff>0)i.num_diff--" href="javascript:;" class="remove_menu_item pull-right">
                <h4 class="glyphicon glyphicon-minus-sign text-danger"></h4>
              </a> 
              <h4><a href="javascript:;">{{i.num_diff}}</a></h4>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="btn_content">
        <button @click="retreat" class="btn btn-warning btn-lg btn-block">确认退菜</button>
      </div>
  </div>
</template>
<script>
import { axios } from "@/static/js/utils";
export default {
  name: "retreat",
  data() {
    return {
      menuList: []
    };
  },
  methods: {
    retreat() {
      const type = JSON.parse(localStorage.getItem('userData')).type
      if(type == 1){
        axios
          .post("menu/back", {
            id: this.id,
            order_id: this.order_id,
            menu: this.menuList
          })
          .then(res => {
            if (res.data.code) {
              mui.back();
            }
          });
      }else{
        axios
          .post("menu/back_action", {
            order_id: this.order_id,
            menu: this.menuList
          })
          .then(res => {
            if (res.data.code) {
              mui.back();
            }
          });
      }
    }
  },
  created() {
    this.id = plus.webview.currentWebview().desk_id;
    this.order_id = plus.webview.currentWebview().order_id;
    axios
      .get("menu/read", {
        params: {
          order_id: this.order_id
        }
      })
      .then(res => {
        this.menuList = res.data.data.lists.map(item => {
          item.num_diff = 0;
          return item;
        });
      });
  }
};
</script>
<style scoped>
.btn_content {
  position: absolute;
  width: 100%;
  padding: 20px;
  bottom: 0;
}
</style>

